<!DOCTYPE html>
<html>



<head>
    <!-- 和昌光谷未来成 积分商城H5后台 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>矩阵互动</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <style>
        .headimgUrl {
            width: 50px;
            height: 50px;
        }

        .serchInput {
            float: right;
            width: 200px;
            padding: 7px;
            border: 1px solid #958787;
            border-radius: 6px;
            margin-right: 20px;
            height: 44px;
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 18px;
        }

        .serchBtn {
            float: right;
            margin-right: 20px;
            width: 129px;
            font-size: 21px;
            margin-top: 5px;
            margin-bottom: 5px;
            font-weight: 600;
        }
    </style>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>
        if (window.top !== window.self) { window.top.location = window.location; }
    </script>
</head>

<body class="gray-bg">

    <div id="login" class="middle-box text-center loginscreen  animated fadeInDown" style="margin-top:200px;">
        <div>

            <h3>欢迎使用</h3>

            <form class="m-t" role="form">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名" required="" id="loginUser">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="密码" required="" id="loginPasswd">
                </div>
                <button type="button" class="btn btn-primary block full-width m-b" id="loginBtn">登 录</button>

            </form>
        </div>
    </div>

    <div id="table" class="row" style="display:none;">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h2>和昌光谷积分商城后台管理</h2>
                </div>
                <div>
                    <button type="button" class="btn serchBtn">搜索</button>
                    <input class="serchInput" placeholder="请输入会员名字" />
                </div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                            <!-- <tr>
                                <th>渲染引擎</th>
                                <th>浏览器</th>
                                <th>平台</th>
                                <th>引擎版本</th>
                                <th>CSS等级</th>
                            </tr> -->
                        </thead>
                        <tbody>
                            <!-- <tr class="gradeX">
                                <td>Trident</td>
                                <td>Internet Explorer 4.0
                                </td>
                                <td>Win 95+</td>
                                <td class="center">4</td>
                                <td class="center">X</td>
                            </tr> -->
                        </tbody>
                    </table>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">显示 1 到 10 项，共 57 项</div>
                        </div>
                        <div class="col-sm-6">
                            <ul class="pagination" style="margin: 0;padding: 0;    float: right;">
                                <li class="paginate_button previous" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_previous">
                                    <a href="#">上一页</a>
                                </li>
                                <li class="paginate_button next" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_next">
                                    <a href="#">下一页</a>
                                </li>
                                <li class="paginate_button" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_over">
                                    <a href="#">最后一页</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="row">
                        <button class="btn btn-default" type="button" class="btn" id="downTable">
                            下载表格
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script>

        var remoteUrl = 'http://api.juzhen05.com/api';
        // var remoteUrl = 'http://localhost:61337/api';
        function fecthLogin(account, password, cb) {
            $.post(remoteUrl + '/checkin_hcgg_1109', { cmd: 2, account: account, password: password }, function (data) {
                if (cb) cb(data);
            })
        }

        function fecthTable(cb, condition, offset, limit) {
            $.post(remoteUrl + '/checkin_hcgg_1109', { cmd: 3, condition: condition, offset: offset, limit: limit, token: localStorage.getItem('local_token') }, function (data) {
                if (cb) cb(data);
            })
        }

        // 更改积分
        function fecthPoint(cb, wcOpenid, point) {
            $.post(remoteUrl + '/checkin_hcgg_1109', { cmd: 4, openid: wcOpenid, point: point, token: localStorage.getItem('local_token') }, function (data) {
                if (cb) cb(data);
            })
        }

        function downTable(name) {
            var url = 'http://api.juzhen05.com/admin/downtable?tableName=' + name + '&token=' + localStorage.getItem('local_token');
            location.href = url
        }

        $('#downTable').click(function () {
            downTable('checkin_hcgg_1109');
        })

        var curPage = 0;
        var dataCount = 0;
        var pageCount = 0;
        var initTable = function (dataList, comments) {
            var titleDom = document.createElement('tr');
            var str = "";
            for (var i = 0; i < comments.length; i++) {
                str += '<th>' + comments[i].Comment + '</th>';
            }
            titleDom.innerHTML = str;
            $('.ibox-content thead').append(titleDom);


            for (var j = 0; j < dataList.length; j++) {
                var tr = document.createElement('tr');
                str = "";
                for (var k in dataList[j]) {
                    if (k == "headimgUrl") {
                        str += '<td>' + '<img class="headimgUrl" src="' + dataList[j][k] + '" >' + '</td>';
                    } else {
                        str += '<td>' + dataList[j][k] + '</td>';
                    }

                }
                tr.innerHTML = str + '<button type="button" class="btn"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>';
                $('.ibox-content tbody').append(tr);
            }

            // 空值判断
            if (dataList.length <= 0) {
                $('.ibox-content tbody').html('暂无数据')
            }

            $('#DataTables_Table_0_info').text('显示 ' + (curPage * 10 + 1) + ' 到 ' + (curPage * 10 + dataList.length) + ' 项，共 ' + dataCount + ' 项')
        }

        // 登陆
        $('#loginBtn').click(function () {
            fecthLogin($('#loginUser').val(), $('#loginPasswd').val(), function (data) {
                if (data.code) {
                    localStorage.setItem('local_token', data.token)
                    $('#login').hide();
                    $('#table').show();
                    // 获取表格数据
                    fecthTable(function (data) {
                        console.log(data);
                        // 初始化表格
                        dataCount = data.result.count;
                        pageCount = Math.ceil(dataCount / 10); // 10/page
                        initTable(data.result.list, data.result.comments);
                    }, null, 0, 10);
                } else {
                    alert(data.msg);
                }

            });
        })


        // 下一页
        $('#DataTables_Table_0_next').click(function () {
            // 检查是否能下一页
            if (curPage + 1 < pageCount) {

                fecthTable(function (data) {
                    console.log(data);
                    // 初始化表格
                    curPage++;
                    $('.ibox-content thead').empty();
                    $('.ibox-content tbody').empty();
                    initTable(data.result.list, data.result.comments);
                }, null, (curPage + 1) * 10, 10);
            } else {
                alert('已经到达最后页');
            }
        })

        // 上一页
        $('#DataTables_Table_0_previous').click(function () {
            // 检查是否能下一页
            if (curPage - 1 > -1) {
                fecthTable(function (data) {
                    console.log(data);
                    // 初始化表格
                    curPage--;
                    $('.ibox-content thead').empty();
                    $('.ibox-content tbody').empty();
                    initTable(data.result.list, data.result.comments);
                }, null, (curPage - 1) * 10, 10);
            } else {
                alert('已经到达最后页');
            }
        })

        // 最后一页
        $('#DataTables_Table_0_over').click(function () {
            // 检查是否能下一页
            // 查看最后一页是多少, 整数10为单位
            if (pageCount - 1) {
                fecthTable(function (data) {
                    console.log(data);
                    // 初始化表格
                    curPage = pageCount - 1;
                    $('.ibox-content thead').empty();
                    $('.ibox-content tbody').empty();
                    initTable(data.result.list, data.result.comments);
                }, null, (pageCount - 1) * 10, 10);
            }
        })

        // 修改其中一行的数据
        $('tbody').delegate('button', 'click', function (e) {
            var parent;

            if (e.target.localName === "span") {
                parent = e.target.parentElement.parentElement;
            } else {
                parent = e.target.parentElement;
            }

            var wcOpenid = parent.children[0].textContent;
            var point = prompt('请输入积分');
            fecthPoint(function (data) {
                if (data.code) {
                    alert('修改成功')
                    parent.children[parent.children.length - 4].textContent = point;
                } else {
                    alert(data.msg);
                }
            }, wcOpenid, point)

        })

        // 搜索
        $('.serchBtn').click(function () {
            var name = $('.serchInput').val();
            if (name) {
                fecthTable(function (data) {
                    console.log(data);
                    // 初始化表格
                    $('.ibox-content thead').empty();
                    $('.ibox-content tbody').empty();
                    initTable(data.result.list, data.result.comments);
                }, { name: name }, 0, 100);
            } else {
                fecthTable(function (data) {
                    console.log(data);
                    // 初始化表格
                    curPage = 0;
                    $('.ibox-content thead').empty();
                    $('.ibox-content tbody').empty();
                    initTable(data.result.list, data.result.comments);
                }, null, 0, 10);
            }

        })  
    </script>

</body>

</html>